import React from 'react';
import ReactDOM from 'react-dom';
import {observable,action} from 'mobx';
import TimerView from './components/TimerView'


var appState = observable({
    timer: 0
});

appState.resetTimer = action(function reset() {
  appState.timer = 0;
});

setInterval(action(function tick() {
  appState.timer += 1;
}), 1000);

class App extends React.Component {
  render(){ // Every react component has a render method.
    return( // Every render method returns jsx. Jsx looks like HTML, but it's actually javascript and functions a lot like xml, with self closing tags requiring the `/` within the tag in order to work propperly
      <div>
        Hello Mobx !
        <TimerView appState={appState}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));